import { observer } from 'mobx-react-lite'
import styles from './addProject.less'
import { Input, Button, Form, Select, Cascader, Tabs, Menu, Radio, Layout } from 'antd'
import { SaveOutlined, SendOutlined, CopyOutlined } from '@ant-design/icons'
import { getSelectMajorStationList, getSelectTradeList, getProject, getProject2, getBriefTree, getProjectResources, getLeadProject } from '@/services'
import React, { useEffect, useState } from 'react';
import { IMajorStationList, ISelectBrief, ISelectTradeList, ProjectResourcesList, LeadProjectList } from '@/utils/interface'
import axios from 'axios'
import useStore from '@/context/useStore'
import { IRouteComponentProps } from '@umijs/renderer-react'
import Editor from 'for-editor'
import { Link } from 'umi'

const { TextArea } = Input
const { Option } = Select
const { TabPane } = Tabs;
const { SubMenu } = Menu;
const { Content, Sider } = Layout;
const type = ['生产实训', '教学实训', '专业群实训']

const addProject: React.FC<IRouteComponentProps> = ({ history, location, match }) => {

  const Demo = () => (
    <Tabs defaultActiveKey="1" className={styles.tabs}>
      <TabPane tab="实训大纲" key="1" className={styles.tabPane1}>
        <div>
          <Menu
            style={{ width: 200 }}
            defaultSelectedKeys={['10']}
            defaultOpenKeys={['1']}
            mode="inline"
          >
            {
              selectBrief.map(item => {
                return <SubMenu key={item.value} title={item.label}>
                  {
                    item.children.map(it => {
                      return <Menu.Item key={it.value}>{it.label}</Menu.Item>
                    })
                  }
                </SubMenu>
              })
            }
          </Menu>
        </div>
        <div>
          <Editor style={{ width: 800 }} />
        </div>
      </TabPane>
      <TabPane tab="实训任务" key="2">
        <Button type='primary' style={{ float: 'right' }}>+添加任务</Button>
      </TabPane>
      <TabPane tab="项目资源" key="3">
        <Layout >
          <Content >
            <Layout >
              <Sider className="site-layout-background" width={260}>
                <Menu
                  className={styles.ant_menu}
                  mode="inline"
                  defaultSelectedKeys={['1']}
                  defaultOpenKeys={['sub1']}
                  style={{ height: '100%' }}
                >
                  {
                    ProjectResourcesList.map((item, index) => {
                      return <SubMenu key={index} title={item.label}>
                        {
                          item.children.map((_item1: any, index1: any) => {
                            return <Menu.Item key={_item1.value}>{_item1.label}</Menu.Item>
                          })
                        }
                      </SubMenu>
                    })
                  }
                </Menu>
              </Sider>
              <Content style={{ padding: '0 24px', minHeight: 280 }}>
                <div className={styles.resource}>
                  <div className={styles.resource_title}>
                    <CopyOutlined />保存
                                  </div>
                  <div className={styles.resource_content}>
                    <div>
                      <span>资源名称</span>
                      <Input />
                      <span>+</span>
                      <span>-</span>
                    </div>
                    <div>
                      <span>提交类型</span>
                      <Radio>文件</Radio>
                      <Button type="primary">+上传文件</Button>
                    </div>
                    <div>
                      <Radio>链接</Radio>
                      <Input placeholder='请输入链接地址' />
                    </div>
                    <div>
                      <span>描述</span>
                      <Input placeholder='请输入内容' />
                    </div>
                    <div>
                      <span>教师</span>
                      <Radio.Group defaultValue="a" size="small" style={{ marginTop: 16 }}>
                        <Radio.Button value="a">可见</Radio.Button>
                        <Radio.Button value="b">不可见</Radio.Button>
                      </Radio.Group>
                    </div>
                    <div>
                      <span>学生</span>
                      <Radio.Group defaultValue="a" size="small" style={{ marginTop: 16 }} value={svalue}>
                        <Radio.Button value="a">可见</Radio.Button>
                        <Radio.Button value="b">可下载</Radio.Button>
                        <Radio.Button value="c">不可见</Radio.Button>
                      </Radio.Group>
                    </div>
                  </div>
                </div>
              </Content>
            </Layout>
          </Content>
        </Layout>
      </TabPane>
      <TabPane tab="实训环境" key="4">
        <div className={styles.environment}>
          <Form>
            <div className={styles.environment_title}>
              <CopyOutlined /><span>保存</span>
            </div>
            <div className={styles.environment_content}>
              <div>
                <Form.Item label="项目名称" name='exName' rules={[{ required: true, message: "请输入项目名称" }]}>
                  <Input placeholder='请输入标题' value={exName} onBlur={e => setexName(e.target.value)} />
                </Form.Item>
              </div>
              <div>
                <Form.Item label="环境地址" name='exUrl' rules={[{ required: true, message: "请输入项目名称" }]}>
                  <Input placeholder='请输入外部链接地址' value={exUrl} onBlur={e => setexUrl(e.target.value)} />
                </Form.Item>
              </div>
              <div>
                <Form.Item label="环境描述" name='exDescribes' rules={[{ required: true, message: "请输入项目名称" }]}>
                  <Input placeholder='请输入内容' value={exDescribes} onBlur={e => setexDescribes(e.target.value)} />
                </Form.Item>
              </div>
            </div>
          </Form>
        </div>
      </TabPane>
      <TabPane tab="前置项目" key="5">
        <div className={styles.lead}>
          <div className={styles.lead_title}>
            <CopyOutlined />保存
                    </div>
          <div className={styles.lead_content}>
            <p>添加与新项目关联的项目</p>
            <div>
              <Cascader options={LeadProjectList} placeholder="Please select" className={styles.select}
              />
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>
  )
  //上方表单内容                
  let [selectMajorStationList, setSelectMajorStationList] = useState<IMajorStationList[]>([])
  let [selectTradeList, setSelectTradeList] = useState<ISelectTradeList[]>([])
  let [pictureUrl, setPictureUrl] = useState('')
  let [projectName, setProjectName] = useState('')
  let [version, setVersion] = useState(1)
  let [description, setDescription] = useState('')
  let [majorStationList, setMajorStationList] = useState<any>([])
  let [trade, setTrade] = useState<any>([])
  let [sxType, setSxType] = useState<any>('')
  let [subjectTime, setSubjectTime] = useState(1)
  let [showUrl, setShowUrl] = useState('')
  //实训大纲列表
  let [selectBrief, setSelectBriefTree] = useState<ISelectBrief[]>([])
  //项目资源列表
  let [ProjectResourcesList, setProjectResourcesList] = useState<ProjectResourcesList[]>([]);
  let [svalue, setsvalue] = useState('');
  //实训环境列表
  let [exName, setexName] = useState('');
  let [exDescribes, setexDescribes] = useState('');
  let [exUrl, setexUrl] = useState('');
  //前置项目列表
  let [LeadProjectList, setLeadProjectList] = useState<LeadProjectList[]>([]);
  let versionId = location.query.versionId
  let { addProject } = useStore()

  const add = () => {
    getProject({ ...addProject.addProjectListItem, pictureUrl, name: projectName, version, description, majorStationList, trade, sxType, subjectTime, showUrl }).then(res => {
      console.log(res);
      if (res.code === 200) {
        history.replace(`/teachers/addProject?versionId=${res.data.versionId}&proId=${res.data.id}&see=false`)
      }
    })
  }

  useEffect(() => {
    getSelectMajorStationList().then((res:any) => {
      console.log(res);
      setSelectMajorStationList(res.data)
    })
    getSelectTradeList().then((res:any) => {
      console.log(res.data);
      setSelectTradeList(res.data)
    })
  }, [])
  useEffect(() => {
    if (versionId) {
      getProject2(versionId as string).then(res => {
        if (res.code === 200) {
          setProjectName(res.data.name)
          setDescription(res.data.description)
          setVersion(res.data.version)
          setMajorStationList(res.data.majorStationList)
          setTrade(res.data.trade)
          setSxType(type[res.data.sxType])
          setSubjectTime(res.data.subjectTime)
          setPictureUrl(res.data.pictureUrl)
          setShowUrl(res.data.showUrl)
        }
      })
      getBriefTree().then(res => {
        if (res.code === 200) {
          setSelectBriefTree(res.data)
        }
      })
      getProjectResources().then(res => {
        if (res.code === 200) {
          setProjectResourcesList(res.data)
        }
      })
      getLeadProject().then(res => {
        setLeadProjectList(res.data)
    })
    }
  }, [versionId])


  return <div className={styles.addProject}>
    <h3 className={styles.headline}><span><b>|</b>  添加项目</span>  <span><Link to='/teachers/proManagemen'><Button>返回</Button></Link>  <Button type='primary'><SendOutlined />  提交审核</Button></span></h3>
    <div className={styles.main}>
      <h3 className={styles.headline}><span><b>|</b>  基本信息</span>  <span><Button onClick={() => add()}><SaveOutlined />  保存</Button></span></h3>
      <Form className={styles.from}>
        <div className={styles.fromLeft}>
          <div>
            <Form.Item label="项目名称" rules={[{ required: true, message: "请输入项目名称" }]}>
              <Input className={styles.n1} value={projectName} placeholder='请输入项目名称' style={{ width: 300 }} onChange={e => setProjectName(e.target.value)}></Input>
            </Form.Item>
            <Form.Item label="版本 V" rules={[{ required: true, message: "请输入版本" }]}>
              <Input className={styles.n2} value={version} defaultValue='1' style={{ width: 80 }} onChange={e => setVersion(Number(e.target.value))}></Input>
            </Form.Item>
          </div>
          <div>
            <Form.Item className={styles.n3} rules={[{ required: true, message: "请输入项目简介" }]}>
              <TextArea rows={2} value={description} style={{ width: 600 }} onChange={e => setDescription(e.target.value)}></TextArea>
            </Form.Item>
          </div>
          <div>
            <Form.Item label="专业">
              <Cascader className={styles.select} value={majorStationList} options={selectMajorStationList} placeholder='请选择' onChange={value => setMajorStationList(value)}></Cascader>
            </Form.Item>
            <Form.Item label="行业">
              <Select mode="tags" tokenSeparators={[',']} value={trade} style={{ width: '200px' }} onChange={value => setTrade(value)}>
                {
                  selectTradeList.map(item => {
                    return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                  })
                }
              </Select>
            </Form.Item>
          </div>
          <div>
            <Form.Item label="实训类型">
              <Select style={{ width: 310 }} value={sxType} onChange={value => setSxType(value)}>
                {
                  type.map((item, index) => {
                    return <Option value={index} key={item}>{item}</Option>
                  })
                }
              </Select>
            </Form.Item>
            <Form.Item label="预期总工时">
              <Input type='number' defaultValue='1' value={subjectTime} onChange={e => setSubjectTime(Number(e.target.value))}></Input>
            </Form.Item>
          </div>
        </div>
        <div className={styles.fromRight}>
          <div>
            <Form.Item label="封面" rules={[{ required: true, message: "请选择封面" }]}>
              <Input type='file' onChange={e => {
                console.log(e)
                let form = new FormData();
                let files = e.target.files as FileList
                for (let i = 0; i < files.length; i++) {
                  form.append(files[i].name, files[i])
                }
                axios.post('http://123.206.55.50:11000/upload', form).then(res => {
                  // console.log(res,res.data.data[0].path);
                  setPictureUrl(res.data.data[0].path)
                })
              }} />
            </Form.Item>
          </div>
          <div>
            <Form.Item label="演示地址" rules={[{ required: true, message: "请输入演示地址" }]}>
              <Input value={showUrl} onChange={e => setShowUrl(e.target.value)} />
            </Form.Item>
          </div>
        </div>
      </Form>
    </div>
    <div className={styles.bottom}>
      {
        versionId ? <Demo /> : null
      }
    </div>
  </div>
}

export default observer(addProject)